<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<uni-nav-bar :shadow="false" :border="false" @click-left="clickLeft" @click-right="clickRight">
			<!-- 左边图标 -->
			<block slot="left">
				<view class="iconfont icon-haoyou ml-2 mr-2" style="font-size: 20px;"></view>
			</block>
			<!-- 中间搜索框 -->
			<view class="flex justify-center align-center rounded flex-1 mt-1 font"
				style="margin-left: -46upx;height: 60upx;">
				消息列表
			</view>
			<!-- 右边图标 -->
			<block slot="right">
				<view class="icon iconfont icon-caidan text-dark" style="font-size: 20px;"></view>
			</block>
		</uni-nav-bar>
		<!-- #endif -->
		<template v-if="list.length > 0">
			<block v-for="(item,index) in list" :key="index">
				<msgList :item="item" :index="index"></msgList>
			</block>
		</template>
		<template v-else>
			<nothing></nothing>
		</template>

		<!-- 弹出层 -->
		<uniPopup ref="popup" type="top">
			<view class="flex justify-center align-center py-2 font-md border" hover-class="bg-light"
				@click="popupEvent('search')">
				<text class="iconfont icon-sousuo mr-1"></text>添加好友
			</view>
			<view class="flex justify-center align-center py-2 font-md border" hover-class="bg-light"
				@click="popupEvent('clear')">
				<text class="iconfont icon-qingchu mr-1"></text>清除缓存
			</view>
		</uniPopup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import msgList from "@/components/msg/msg-list.vue"
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			msgList,
			uniPopup,
			uniNavBar
		},
		data() {
			return {}
		},
		computed: {
			...mapState({
				list: state => state.chatList
			})
		},
		onPullDownRefresh() {
			this.refresh()
		},
		//监听顶部按钮点击事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
					uni.navigateTo({
						url: '../user-list/user-list',
					});
					this.$refs.popup.close()
					break;
				case 1:
					this.$refs.popup.open()
					break;
				default:
					break;
			}
		},
		onLoad() {
			console.log(this.list)
		},
		methods: {
			// #ifndef APP-PLUS
			clickLeft() {
				uni.navigateTo({
					url: '../user-list/user-list',
				});
				this.$refs.popup.close()
			},
			clickRight() {
				this.$refs.popup.open()
			},

			// #endif
			//下拉刷新
			refresh() {
				setTimeout(() => {
					// this.list = demo
					uni.stopPullDownRefresh()
				}, 2000)
			},
			//添加好友、清除缓存
			popupEvent(type) {
				switch (type) {
					case 'search':
						this.$refs.popup.close()
						uni.navigateTo({
							url: '../search/search?type=user',
						});
						break;
					case 'clear':
						this.$refs.popup.close()
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>

</style>
